<script setup lang="ts">
import { xunfeiAudio } from '@src/api/xunfei'
import { AxiosResult } from '@src/config/interface'
import { ElMessage } from 'element-plus'
type Vcn = 'xiaoyan' | 'aisjiuxu' | 'aisxping' | 'aisjinger' | 'aisbabyxu'
interface audioForm {
  message: string
  vcn: Vcn
}
interface StateInterface {
  active: string
  audioForm: audioForm
  audioURL: string
}
const State = reactive<StateInterface>({
  active: 'audio',
  audioForm: {
    message: '',
    vcn: 'xiaoyan',
  },
  audioURL: '',
})
function createAudio() {
  if (State.audioForm.message.replace(/\s/g, '') == '') {
    ElMessage({
      message: '请填写语音内容',
      type: 'warning',
    })
    return
  }
  const form = new FormData()
  form.append('message', State.audioForm.message)
  form.append('vcn', State.audioForm.vcn)
  xunfeiAudio(form).then((res: AxiosResult) => {
    if (res.code === 200) {
      State.audioForm.message = ''
      State.audioURL = res.data
      ElMessage({
        message: res.message,
        type: 'success',
      })
    } else {
      ElMessage({
        message: res.message,
        type: 'error',
      })
    }
  })
}
</script>
<template>
  <div class="xunfei-wrapper">
    <el-tabs v-model="State.active">
      <el-tab-pane label="讯飞语音" name="audio">
        <div class="x-wrapper">
          <ElForm>
            <ElFormItem label="发音人">
              <ElSelect v-model="State.audioForm.vcn">
                <ElOption label="小燕" value="xiaoyan"></ElOption>
                <ElOption label="许久" value="aisjiuxu"></ElOption>
                <ElOption label="小萍" value="aisxping"></ElOption>
                <ElOption label="小婧" value="aisjinger"></ElOption>
                <ElOption label="许小宝" value="aisbabyxu"></ElOption>
              </ElSelect>
            </ElFormItem>
            <ElFormItem label="文本：">
              <ElInput type="textarea" :rows="8" :maxlength="500" :show-word-limit="true" v-model="State.audioForm.message"></ElInput>
            </ElFormItem>
          </ElForm>
          <div class="x-button-wrapper">
            <ElButton type="primary" @click="createAudio">生成语音</ElButton>
          </div>
        </div>
        <Transition name="slide">
          <div class="audio-wrapper" v-if="State.audioURL">
            <audio controls :src="State.audioURL"></audio>
          </div>
        </Transition>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style lang="scss" scoped>
.xunfei-wrapper {
  padding: 10px;
  border-radius: 10px;
  background-color: #fff;
  .x-button-wrapper {
    text-align: right;
  }
  .audio-wrapper {
    padding: 10px;
    text-align: center;
  }
}
.slide-enter-active,
.slide-leave-active {
  transition: all 1s ease;
}
.slide-enter-from,
.slide-leave-to {
  transform: translateY(100%);
}
</style>
